<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>人像采集-云校通-家长</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart>
	<div class="weui_tab tab-bottom">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left"> <a onclick="back()" href="javascript:" class="icon icon-109 f-white">返回</a> </div>
	    	<h1 class="weui-header-title">人像采集</h1>
	    </div>
		<div class="weui_tab_bd">
			<div class="weui_cells afterNone afterNoneBefore mt0">
	            <div class="weui_cells_title" style="line-height: 25px;color: #000;">
	            	<span class="f-red">1.点击“虚线框中的加号”可以上传照片。</span><br/>
	            	<span class="f-red">2.点击“已上传的照片”可以重新上传照片。</span><br/>
	            </div>
	        </div>
	        <div class="weui_cells mt0">
          		<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class="">家长人像采集</p>
		            </div>
	          	</div>
	          	<div class="logding_select" id="paretnList">
					
				</div>
	        </div>
	        
	        <div class="weui_cells afterNone afterNoneBefore mt0 mb40">
          		<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class="">学生人像采集</p>
		            </div>
	          	</div>
	          	<div class="logding_select" id="studentList">
					
				</div>
	        </div>
		</div>
	</div>
	<div id="upload_div_box" class="weui_tab tab-bottom" style="display:none; z-index:600; background-color: #f8f8f8;">
		<div class="weui_tab_bd">
	        <div class="weui-header bg-blue"> 
	        	<div class="weui-header-left" onclick="cancelBack()"> <a class="icon icon-109 f-white">取消</a>  </div>
				<h1 class="weui-header-title">人脸上传</h1>
			</div>
	        <div class="">
	          	<div id="clipArea"></div>
				<input type="file" id="file" accept="image/*" style="display:none">
	    	</div>
	    	<div class="weui-cells">
	    		<div class="weui_cells_title f-red">
	    			<span class="f-red">操作提示：</span><br/>
					<span class="f-red">1.点击下面的“拍照或选取照片”按钮。</span><br/>
					<span class="f-red">2.上面有照片后，两手指在虚线框中挤压缩放照片，把照片缩放成像证件照中的人脸大小，然后再点击下面的“截取并上传”，不能上传全身照或生活照哦。</span>
	    		</div>
	    		<div class="weui_btn_area">
			        <span class="weui_btn bg-green" onclick="file.click()">拍照或选取照片</span>
			    	<span class="weui_btn bg-orange" id="clipBtn">截取并上传</span>
			    </div>
			    <div id="uploadLoading" class="tcenter">
			    </div>
	    	</div>
	    </div>
	</div>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script src="<%=basePath %>/js/photoclip/hammer.min.js" type="text/javascript"></script>
<script src="<%=basePath %>/js/photoclip/iscroll-zoom-min.js" type="text/javascript"></script>
<script src="<%=basePath %>/js/photoclip/lrz.all.bundle.js" type="text/javascript"></script>
<script src="<%=basePath %>/js/photoclip/PhotoClip.js" type="text/javascript"></script>
<script type="text/javascript">
	var dataList, ekey, clipArea;
	$(function(){
		faceCollectionList();
	});
	
	function faceCollectionList() {
		$.ajax({
	 		url : basePath + "/xs/my/faceCollection/list",
	 		type : "post",
	 		data : {},
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			if(data.code != '000') {
	 				$.toast(data.msg, "cancel");
	 			}else {
	 				dataList = data.data;
	 				var parentHtml = '', studentHtml = '';
	 				for(var i in dataList.paretnList) {
	 					var key = "parent_" + dataList.paretnList[i].id;
	 					var path = "<%=basePath %>/images/add_img.png";
	 					var faceDate = null;
	 					if(dataList.paretnList[i].faceImgUrl) {
	 						path = imgUrl + dataList.paretnList[i].faceImgUrl+"?v="+new Date().getTime();;
	 						faceDate = dataList.paretnList[i].faceDate;
	 					}
	 					var relation = dataList.paretnList[i].relation;
	 					if(!relation) {
	 						dataList.paretnList[i].relation = "亲朋";
	 					} else if(relation && relation == '其它') {
	 						dataList.paretnList[i].relation = "亲朋";
	 					}
	 					parentHtml += '<div class="lod">';
	 					parentHtml += '<img id="'+key+'" onclick="chooseImage(\''+key+'\')" src="'+path+'" class="logding_select_add" style="object-fit: contain;">';
	 					if(faceDate) parentHtml += '<div class="msg-tips">'+faceDate+'</div>';
	 					parentHtml += '<div class="msg-tips">'+dataList.paretnList[i].studentName+'的'+dataList.paretnList[i].relation+'</div></div>';
	 				}
	 				$("#paretnList").html(parentHtml);
	 				for(var i in dataList.studentList) {
	 					var key = "student_" + dataList.studentList[i].studentId;
	 					var path = "<%=basePath %>/images/add_img.png";
	 					var faceDate = null;
	 					if(dataList.studentList[i].faceImgUrl) {
	 						path = imgUrl + dataList.studentList[i].faceImgUrl+"?v="+new Date().getTime();
	 						faceDate = dataList.studentList[i].faceDate;
	 					}
	 					studentHtml += '<div class="lod">';
	 					studentHtml += '<img id="'+key+'" onclick="chooseImage(\''+key+'\')" src="'+path+'" class="logding_select_add" style="object-fit: contain;">';
	 					if(faceDate) studentHtml += '<div class="msg-tips">'+faceDate+'</div>';
	 					studentHtml += '<div class="msg-tips pl10">'+dataList.studentList[i].studentName+'</div></div>';
	 				}
	 				$("#studentList").html(studentHtml);
	 			}
	 		}, error:function(){
	 			alert("上传异常");
      		}
	 	});
	}
	function cancelBack() {
		$("#upload_div_box").hide();
		clipArea.destroy();
		$("#uploadLoading").html('');
	}
	//拍照或从手机相册中选图接口
    function chooseImage(key) {
    	$("#upload_div_box").show();
    	ekey = key;
    	clipArea = new PhotoClip('#clipArea', {
    		size: [240, 280],
    		outputSize: [480, 640],
    		outputQuality:0.95,
    		file: '#file',
    		view: '#view',
    		ok: '#clipBtn',
    		img: '',
    		loadStart: function() {
    			
    		},
    		loadComplete: function() {
    			
    		},
    		done: function(dataURL) {
    			$("#uploadLoading").html('<img src="<%=basePath %>/images/loading.gif"><p class="f-orange">上传中,请稍候...</p>');
    			wechatMediaDownload(dataURL);
    		},
    		fail: function(msg) {
    			$("#uploadLoading").html('');
    			alert(msg);
    		}
    	});
	}
	function wechatMediaDownload(dataURL) {
		var size = showSize(dataURL);
		if(size >= 200) {
			alert("截取的人脸尽量再近一下");
			return;
		}
		var array = ekey.split("_"), currDate, paramDate = {};
		paramDate.faceUrl = dataURL;
		if(array[0] == 'parent') {
			paramDate.groupType = "parent";
			for(var i in dataList.paretnList) {
				if(dataList.paretnList[i].id == parseInt(array[1])) {
					paramDate.grade = dataList.paretnList[i].grade;
					paramDate.relation = dataList.paretnList[i].relation;
					paramDate.studentId = dataList.paretnList[i].studentId;
					paramDate.studentName = dataList.paretnList[i].studentName;
					paramDate.parentId = dataList.paretnList[i].id;
					break;
				}
			}
		}else {
			paramDate.groupType = "student";
			for(var i in dataList.studentList) {
				if(dataList.studentList[i].studentId == parseInt(array[1])) {
					paramDate.grade = dataList.studentList[i].grade;
					paramDate.studentName = dataList.studentList[i].studentName;
					paramDate.studentId = dataList.studentList[i].studentId;
					paramData.schoolId = dataList.studentList[i].schoolId;
					break;
				}
			}
		}
        $.ajax({
	 		url : basePath + "/xs/my/faceUpload",
	 		type : "post",
	 		data : paramDate,
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			$("#uploadLoading").html('');
	 			if(data.code != '000') {
	 				alert(data.data.error_msg);
	 				return;
	 			}else {
	 				$("#" + ekey).attr("src", imgUrl + data.data.fileUrl + "?v=" + new Date().getTime());
	 				cancelBack();
	 			}
	 		}, error:function(){
	 			alert("上传异常");
      		}
	 	});
   }

	function showSize(base64url) {
        //获取base64图片大小，返回MB数字
        var str = base64url.replace('data:image/png;base64,', '');
        var equalIndex = str.indexOf('=');
        if(str.indexOf('=')>0) {
            str=str.substring(0, equalIndex);
        }
        var strLength=str.length;
        var fileLength=parseInt(strLength-(strLength/8)*2);
        // 由字节转换为MB
        var size = "";
        size = (fileLength/(1024)).toFixed(2);
        var sizeStr = size + "";                        //转成字符串
        var index = sizeStr.indexOf(".");                    //获取小数点处的索引
        var dou = sizeStr.substr(index + 1 ,2)            //获取小数点后两位的值
        if(dou == "00"){                                //判断后两位是否为00，如果是则删除00                
            return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
        }
        return parseInt(size);
    }
</script>
</html>